<template>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }" v-if="route.path!=='/index'"></el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breads">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup lang="ts">
import {ref,watch} from "vue"
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from "vue-router";
const route = useRoute()
const breads = ref<any>([])
watch(route,()=>{
    console.log(route);
    breads.value = route.matched.filter((item,index)=>index>0)
},{immediate:true})
</script>

<style scoped>
.bread{
    margin-bottom: 20px;
}
</style>